<template>
	<view>
		<u-navbar title=" " @rightClick="rightClick" :autoBack="true" bgColor="transparent"
			leftIconColor="#fff"></u-navbar>
		<view class="top_view flex1"
			style="background-image: url(https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/yuyue_bg.png)">
			<view class="top_view_buzou">
				<view class="top_view_buzou_tiao"></view>
				<view class="top_view_buzou_dian flex">
					<view class="top_view_buzou_dian_item">
						<image v-if="data.status>=0"
							src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/buzhou.png"
							class="top_view_buzou_dian_img" mode=""></image>
						<image v-else src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/buzhou_no.png"
							class="top_view_buzou_dian_img" mode=""></image>
						<view class="top_view_buzou_dian_item_text">
							预约中
						</view>
					</view>
					<view class="top_view_buzou_dian_item">
						<image v-if="data.status>=1"
							src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/buzhou.png"
							class="top_view_buzou_dian_img" mode=""></image>
						<image v-else src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/buzhou_no.png"
							class="top_view_buzou_dian_img" mode=""></image>
						<view class="top_view_buzou_dian_item_text">
							待就诊
						</view>
					</view>
					<view class="top_view_buzou_dian_item">
						<image v-if="data.status>=3"
							src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/buzhou.png"
							class="top_view_buzou_dian_img" mode=""></image>
						<image v-else src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/buzhou_no.png"
							class="top_view_buzou_dian_img" mode=""></image>
						<view class="top_view_buzou_dian_item_text">
							待评价
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content_top">
				<view class="doctor">
					<view class="doctor_info" v-for="(items,index) in data.doctor">
						<view class="doctor_info_top flex1">
							<image :src="ImgUrl+items.doctor.avatar" class="doctor_info_top_left" mode=""></image>
							<view class="doctor_info_top_right">
								<view class="doctor_info_top_right_top">
									{{items.doctor.name}}
									<text class="doctor_info_top_right_top_desc">{{item.doctor.level.name}}</text>
								</view>
								<view class="doctor_info_top_right_bottom">{{items.doctor.hospital.name}}</view>
							</view>
						</view>
						<view class="doctor_info_item flex">
							<view class="doctor_info_item_left">科室名称</view>
							<view class="doctor_info_item_right">
								{{items.doctor.hospital.name}}-{{items.doctor.department.name}}</view>
						</view>
						<view class="doctor_info_item flex">
							<view class="doctor_info_item_left">咨询时间</view>
							<view class="doctor_info_item_right">{{dataz.created_at}}</view>
						</view>
						<view class="doctor_info_item flex">
							<view class="doctor_info_item_left">问诊类型</view>
							<view class="doctor_info_item_right">
								{{item.type == 1?'图文':item.type == 2?'视频':item.type == 3?'飞刀':'多人'}}问诊</view>
						</view>
						<view class="doctor_info_item flex">
							<view class="doctor_info_item_left">服务费</view>
							<view class="doctor_info_item_right">{{data.actually_amount}}元</view>
						</view>
						<view class="doctor_info_item flex">
							<view class="doctor_info_item_left">优惠券</view>
							<view class="doctor_info_item_right" v-if="false">暂无</view>
							<view class="doctor_info_item_right flex1" @click="go_choose_coupon">
								<view class="doctor_info_item_right_money">-{{data.coupon_amount}}元</view>
								<u-icon name="arrow-right" color="#999999;" size="12"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="jiuzhen_info">
					<view class="jiuzhen_info_item flex1">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/shengming.png"
							class="jiuzhen_info_item_icon" mode=""></image>
						<view class="jiuzhen_info_item_text">
							就诊须知 <text class="jiuzhen_info_item_text_desc">（预约即代表同意以下规则）</text>
						</view>
					</view>
					<view class="jiuzhen_info_item1">
						1、预约成功后将与医师发起对话，请及时关注您的消息通知
					</view>
					<view class="jiuzhen_info_item1">
						2、订单取消规则
					</view>
					<view class="jiuzhen_info_item1">
						3、实名制预约，就诊人信息不符将无法就诊
					</view>
				</view>
				<view class="jiuzhen_info_time flex">
					<view class="jiuzhen_info_time_left">
						<view class="jiuzhen_info_time_top">
							预计问诊时间：
						</view>
						<view class="jiuzhen_info_time_bottom">
							请打开APP并保证网络流畅
						</view>
					</view>
					<view class="jiuzhen_info_time_right">
						{{date}}
					</view>
				</view>
			</view>
			<view class="content_title">
				就诊人
			</view>
			<view class="jzr_view">
				<view class="jzr_view_top">
					{{data.partner.name}} <text
						class="jzr_view_top_desc">{{data.partner.gender==0?'女':data.partner.gender==1?'男':'未知'}} |
						{{data.partner.age}}</text>
				</view>
				<view class="jzr_view_bottom flex">
					<view class="jzr_view_bottom_left">
						<view class="jzr_view_bottom_left_item">
							描述病症：{{data.symptom_ids}}{{data.symptom_customize}}
						</view>
						<view class="jzr_view_bottom_left_item mar16">
							支付金额：{{data.total_amount}}元
						</view>
					</view>
					<view class="jzr_view_bottom_right">
						支付状态: {{data.pay_status == 0?'待支付':data.pay_status == 1?'已支付':'支付失败'}}
					</view>
				</view>
			</view>
		</view>
		<!-- 评价 -->
		<template v-if="data.status==3">
			<view class="" style="display: flex;align-items: center;justify-content: space-between;margin: 40rpx 30rpx;">
				<view class="" style="width: 186rpx;height: 3rpx;background: #ccc;">
					
				</view>
				<view class="" style="font-size: 24rpx;color: #666;">
					您对医生的服务满意吗？
				</view>
				<view class="" style="width: 186rpx;height: 3rpx;background: #ccc;">
					
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: center;margin-bottom: 40rpx;">
				<view class="" v-for="(item,index) in 5" style="font-size: 0;">
					<image v-if="(plIndex==0&&index<0)||(plIndex==1&&index<3)||plIndex==2" style="width: 36rpx;height: 36rpx;" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/xing2.png" mode=""></image>
					<image v-else style="width: 36rpx;height: 36rpx;" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/xing1.png" mode=""></image>
				</view>
			</view>
			<view class="" style="margin: 0 30rpx;display: flex;align-items: center;justify-content: space-between;">
				<view @click="changeplIndex(0)" class="" style="width: 210rpx;height: 74rpx;border-radius: 16rpx;display: flex;align-items: center;justify-content: center;font-size: 30rpx;" :style="plIndex==0?'background:linear-gradient(270deg, #0165FB 0%, #7AA7EB 100%);color:#fff;':'background: #FFF;color:#333;'">
					不满意
				</view>
				<view @click="changeplIndex(1)" class="" style="width: 210rpx;height: 74rpx;border-radius: 16rpx;display: flex;align-items: center;justify-content: center;font-size: 30rpx;" :style="plIndex==1?'background:linear-gradient(270deg, #0165FB 0%, #7AA7EB 100%);color:#fff;':'background: #FFF;color:#333;'">
					一般
				</view>
				<view @click="changeplIndex(2)" class="" style="width: 210rpx;height: 74rpx;border-radius: 16rpx;display: flex;align-items: center;justify-content: center;font-size: 30rpx;" :style="plIndex==2?'background:linear-gradient(270deg, #0165FB 0%, #7AA7EB 100%);color:#fff;':'background: #FFF;color:#333;'">
					满意
				</view>
			</view>
			<view class="" style="width: 690rpx;height: 326rpx;border-radius: 16rpx;background: #FFF;margin: 0 auto;margin-top: 40rpx;position: relative;">
				<view class="" style="height: 30rpx;">
					
				</view>
				<input style="margin-left: 30rpx;" type="text" v-model="plcontent" placeholder="您想对医生说点啥？写在这里吧！">
				<view v-if="!plimg" @click="getImage" class="" style="width: 112rpx;height: 112rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;position: absolute;left: 30rpx;bottom: 30rpx;border: 1px solid #CCC;">
					<view class="" style="color: #999;">
						+
					</view>
					<view class="" style="font-size: 20rpx;color: #999;">
						添加图片
					</view>
				</view>
				<view v-else class="" style="width: 112rpx;height: 112rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;position: absolute;left: 30rpx;bottom: 30rpx;font-size: 0;">
					<image style="width: 112rpx;height: 112rpx;" :src="plimg" mode=""></image>
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: flex-end;margin-top: 37rpx;">
				<view @click="niming=!niming" class="" style="width: 30rpx;height: 30rpx;border: 1px solid #777;display: flex;align-items: center;justify-content: center;border-radius: 50%;" :style="!niming?'background: #d9d9d9;':''">
					<view v-if="niming" class="" style="width: 22rpx;height: 22rpx;background: blue;border-radius: 50%;">
						
					</view>
				</view>
				<view class="" style="font-size: 28rpx;color: #666;margin-left: 8rpx;margin-right: 26rpx;">
					匿名评价
				</view>
			</view>
		</template>
		
		<view class="bottom flex">
			<view class="bottom_btn bottom_btn_left" @click="goCancelOrder" v-if="data.status==0">
				取消预约
			</view>
			<view v-if="data.status==2" class="bottom_btn bottom_btn_right" @click="goBack">
				返回首页
			</view>
			<view class="bottom_btn bottom_btn_right" v-if="data.status==0" @click="goPay">
				立即支付
			</view>
			<view class="bottom_btn bottom_btn_right1" @click="gochat" v-if="data.status==2">
				进入聊天
			</view>
			<view class="btn"  @click="pl" v-if="data.status==3&&data.status!=4">
				立即评价
			</view>
		</view>
	</view>
</template>

<script>
	import {
		conDetail,
		cancelOrder,
		pays,
		commenthuizhen
	} from '@/api/common.js';
	import uploadImage from '@/common/ossutil/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				buzhou: 2,
				doctor_list: [{
						name: '王医生',
					},
					{
						name: 'd医生',
					}
				],
				data: {},
				date: '',
				id: '',
				plIndex:0,
				plcontent:'',
				plimg:'',
				plimg2:'',
				niming:false,
			};
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id;
				this.getDeatil(op.id);
			}
		},
		computed: {
			ImgUrl() {
				console.log(this.$store.state.ImgUrl)
				return this.$store.state.ImgUrl
			},
		},
		methods: {
			getImage(type){
				let that = this;
				console.log('12');
				uni.chooseImage({
					sourceType:['album','camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					count: 1,
					success: (res)=>{
						console.log(res,'123');
						let path = res.tempFilePaths[0];
						uploadImage(path,'','wechat/', res => {
							console.log(res,'1234');
							that.plimg = res.imgUrl;
							that.plimg2 = res.imgName;
						});
					},
					fail:res=>{
						console.log(res,'123456')
					}
				});
			},
			gochat(){
				uni.navigateTo({
					url:'/pages/IM/IM?id='+this.data.id+'&group_id='+this.data.group_id
				})
			},
			pl(){
				commenthuizhen({
					star:this.plIndex==0?0:this.plIndex==1?3:5,
					service_comment:this.plIndex,
					content:this.plcontent,
					img:this.plimg2,
					is_anonymous:this.niming?1:0,
					id:this.id,
				}).then(res=>{
					uni.showToast({
						title:'发表成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},800)
				})
			},
			changeplIndex(e){
				this.plIndex = e;
			},
			goCancelOrder() {
				uni.showModal({
					title:'提示',
					content:'确认取消订单吗？',
					success:res=>{
						cancelOrder({
							id: this.id
						}).then(res => {
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 800)
						})
					}
				})
			},
			// 立即支付
			goPay() {
				pays({
					type:'1',//会诊订单
					order_sn: this.data.order_sn,
					channel:2
				}).then(res => {
					// console.log(res,'123');
					let obj = res.data.payInfo;
					uni.requestPayment({
					    provider: 'wxpay',
						...obj,
						// timeStamp: obj.timeStamp,
						// nonceStr: obj.nonceStr,
						// package: obj.package,
						// signType: obj.signType,
						// paySign: obj.paySign,
						success: function (res) {
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 800)
						},
						fail: function (err) {
							// console.log('fail:' + JSON.stringify(err));
							uni.showToast({
								title:'取消支付',
								icon:'none'
							})
						}
					});
				})
			},
			goBack() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getDate() {
				// 获取当前时间
				const now = new Date();
				// 获取年份
				const year = now.getFullYear();
				// 获取月份（注意月份是从0开始的，所以要加1）
				const month = now.getMonth() + 1;
				// 获取日期
				const date = now.getDate();
				// 将年月日拼接成字符串
				const dateString = year + '-' + month + '-' + date;
				this.date = dateString;
			},
			getDeatil(id) {
				conDetail({
					id: id
				}).then(res => {
					if (res.code == 200001) {
						this.data = res.data;
						this.getDate();
					}
				})
			}
		}
	};
</script>

<style>
	page {
		background: #F4F4F4;
		padding-bottom: 200rpx;
	}

	.top_view {
		width: 100%;
		height: 448rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.top_view_buzou {
		width: 550rpx;
		/* height: 56rpx; */
		position: relative;
		margin: 0 auto;
		margin-top: 18rpx;
	}

	.top_view_buzou_tiao {
		width: 500rpx;
		height: 6rpx;
		background: #fff;
		position: absolute;
		left: 50%;
		right: 0;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.top_view_buzou_dian {
		width: 550rpx;
		position: absolute;
		top: -28rpx;
	}

	.top_view_buzou_dian_img {
		width: 56rpx;
		height: 56rpx;
		display: block;
		margin: 0 auto;
	}

	.top_view_buzou_dian_item_text {
		margin-top: 16rpx;
		text-align: center;
		color: #FFF;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
	}

	.content {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: -90rpx;
	}

	.content_top {
		background: #fff;
		border-radius: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #F4F4F4;
	}

	.doctor_info:first-child {
		margin-top: 0;
	}

	.doctor_info {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
	}

	.doctor_info_top_left {
		width: 90rpx;
		height: 90rpx;
		border-radius: 12rpx;
		background: #ccc;
	}

	.doctor_info_top_right {
		margin-left: 20rpx;
	}

	.doctor_info_top_right_top {
		color: #333;
		font-family: Alibaba PuHuiTi 2;
		font-size: 32rpx;
		font-weight: 400;
	}

	.doctor_info_top_right_top_desc {
		color: #444;
		font-family: Alibaba PuHuiTi 2;
		font-size: 26rpx;
		font-weight: 400;
		margin-left: 4rpx;
	}

	.doctor_info_top_right_bottom {
		color: #999;
		font-family: Alibaba PuHuiTi 2;
		font-size: 26rpx;
		font-weight: 400;
		margin-top: 14rpx;
	}

	.doctor_info_item {
		margin-top: 20rpx;
	}

	.doctor_info_item_left {
		color: #999;
		font-family: Alibaba PuHuiTi 2;
		font-size: 24rpx;
		font-weight: 400;
	}

	.doctor_info_item_right {
		color: #333;
		text-align: right;
		font-family: Alibaba PuHuiTi 2;
		font-size: 24rpx;
		font-weight: 400;
	}

	.doctor_info_item_right_money {
		color: #0165fb;
	}

	.jiuzhen_info {
		padding: 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #F4F4F4;
	}

	.jiuzhen_info_item_icon {
		width: 24rpx;
		height: 24rpx;
	}

	.jiuzhen_info_item_text {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-left: 8rpx;
	}

	.jiuzhen_info_item_text_desc {
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}

	.jiuzhen_info_item1 {
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 16rpx;
	}

	.jiuzhen_info_time {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.jiuzhen_info_time_top {
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}

	.jiuzhen_info_time_bottom {
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 4rpx;
	}

	.jiuzhen_info_time_right {
		color: #666;
		text-align: right;
		font-family: Algerian;
		font-size: 32rpx;
		font-weight: 400;
	}

	.content_title {
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 40rpx;
	}

	.jzr_view {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: #FFF;
		margin-top: 30rpx;
	}

	.jzr_view_top {
		padding: 30rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid #F4F4F4;
	}

	.jzr_view_top {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 700;
	}

	.jzr_view_top_desc {
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-left: 8rpx;
	}

	.bottom {
		width: 100%;
		height: 150rpx;
		background: #F4F4F4;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.bottom_btn {
		width: 330rpx;
		height: 78rpx;
		border-radius: 68rpx;
		line-height: 78rpx;
		text-align: center;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
	}

	.bottom_btn_left {
		background: #D7D7D7;
	}

	.bottom_btn_right {
		background: #0165FB;
	}

	.mar20 {
		margin-top: 16rpx;
	}

	.jzr_view_bottom {
		padding: 30rpx 0;
	}

	.jzr_view_bottom_left_item {
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}

	.mar16 {
		margin-top: 16rpx;
	}

	.jzr_view_bottom_right {
		color: #666;
		text-align: right;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}

	.bottom_btn_right1 {
		background: #25D437;
	}

	.btn {
		width: 100%;
		height: 78rpx;
		border-radius: 68rpx;
		line-height: 78rpx;
		text-align: center;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
		background: #0165FB;
	}
</style>